<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>广告轮播</title>
		<style type="text/css">
			#nav{
				width: 520px;
				height: 280px;
				overflow: hidden;
				position: relative;
			}
			#lunbo a {
				text-decoration: none;
				display: none;
			}

			#lunbo a img {
				border: none;
			}
			#nav #tip{
				position: absolute;
				right: 40px;
				bottom: 10px;
			}
			#tip span {
				display: inline-block;
				height: 20px;
				width: 20px;
				background-color: white;
				border-radius: 50%;
			}
		</style>
		<script>
			var index = 0;
			var timer;

			function shiftImg() {
				var d = document.getElementById("lunbo");
				var ar = d.getElementsByTagName("a");
				var br=document.getElementById("tip").getElementsByTagName("span");
				ar[index].style.display = "none";
				br[index].style.backgroundColor="white";
				index++;
				index = index >= 5 ? 0 : index;
				ar[index].style.display = "block";
				br[index].style.backgroundColor="yellow";
			}
			window.onload = function() {
				timer = window.setInterval(shiftImg, 1000);
			}

			function stopAdv() {
				window.clearInterval(timer);
			}

			function continueAdv() {
				timer = window.setInterval(shiftImg, 1000);
			}
		</script>
	</head>
	<body>
		<div id="nav">
			<div id="lunbo" onmouseover="stopAdv()" onmouseout="continueAdv()">
				<a href="#" style="display: block;">
					<img src="../images/1.jpg" />
				</a>
				<a href="#">
					<img src="../images/2.jpg" />
				</a>
				<a href="#">
					<img src="../images/3.jpg" />
				</a>
				<a href="#">
					<img src="../images/4.jpg" />
				</a>
				<a href="#">
					<img src="../images/5.jpg" />
				</a>
			</div>
			<div id="tip">
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
			</div>
		</div>
	</body>
</html>
